<script lang="ts" setup>
import { message, Table } from 'ant-design-vue'
import { defineProps, onMounted, ref } from 'vue'

interface TableProps {
    columns: any[]
    data: () => any[] // 修改为函数类型
    rowKey: string
    pagination?: {
        currentPage: number
        pageSize: number
    }
    total: number
    fetchData: (page: number, pageSize: number) => Promise<any[]>
}
const props = defineProps<TableProps>()
const tableData = ref<any[]>([])

onMounted(() => {
    console.log('接收到的 columns:', props.columns)
    console.log('接收到的 data:', props.data)
    console.log('接收到的 rowKey:', props.rowKey)
    console.log('接收到的 pagination:', props.pagination)
    console.log('接收到的 total:', props.total)
    // 调用 data 函数获取数据
    tableData.value = props.data()
})
// 定义分页配置对象
const paginationConfig = ref({
    current: props.pagination?.currentPage || 1,
    pageSize: props.pagination?.pageSize || 10,
    total: props.total,
    onChange: async (page: number) => {
        try {
            const newData = await props.fetchData(page, props.pagination?.pageSize || 10)
            console.log('新数据:', newData)
            tableData.value = newData
        } catch {
            message.error('数据加载失败')
        }
    }
})
</script>

<template>
    <div>
        <Table
            :columns="columns"
            :data-source="tableData"
            :row-key="rowKey"
            :pagination="paginationConfig"
        />
    </div>
</template>

<style scoped></style>
